<template>
  <div class="overview-pic">
    <!-- 一级目录 -->
    <div class="w-box" v-if="showFirst">
      <el-carousel indicator-position="outside" :initial-index="initialIndex">
        <el-carousel-item v-for="(item, index) in overviewArr">
          <div class="center-round" style="width: 21.875rem; height: 21.875rem">
            <img
              src="../../assets/images/asimgs/003@2x.png"
              class="big-image"
              alt=""
            />
            <div class="big-box">
              <div class="b-center">
                <div class="bold-blue" v-if="index == 0">{{ item[0].num }}</div>
                <div class="bold-blue" v-if="index == 1">
                  {{ item[0].rate }} <span style="font-size: 1.125rem">%</span>
                </div>
                <span v-if="index == 0">总资产数</span>
                <span v-if="index == 1">国产化替代率</span>
              </div>
              <div class="float-box" v-if="index == 0">
                <span>环比(月)</span>
                <i
                  class="el-icon-caret-top"
                  style="color: #ff3535"
                  v-if="item[0].rate.indexOf('-') == -1"
                ></i>
                <i
                  class="el-icon-caret-bottom"
                  style="color: ##00b62c"
                  v-else
                ></i>
                {{ item[0].rate }}
              </div>
            </div>
            <!-- 图片定位部分 -->
            <div class="f-contain">
              <!-- 小圆圈 -->
              <img
                class="icon"
                src="../../assets/images/asimgs/004@2x.png"
                v-for="(i, idx) in 8"
                :style="iconStyle(idx)"
              />
              <!-- 线 -->
              <img
                :src="require(`../../assets/images/asimgs/xian${idx + 1}.png`)"
                class="line"
                v-for="(i, idx) in 8"
                :style="lineStyle(idx)"
              />
              <!-- 内容 -->
              <div
                class="content-box sp-flex"
                v-for="(i, idx) in item.slice(1)"
                :style="boxStyle(idx)"
                @click="enterSec(i, index)"
              >
                <!-- 定位用的图片 -->
                <img
                  :src="
                    require(`../../assets/images/asimgs/k${
                      Math.abs(idx - 4) > 2 || idx >= 6 ? 1 : 2
                    }.png`)
                  "
                  alt=""
                  class="content-img"
                />

                <template v-if="Math.abs(idx - 4) > 2 || idx >= 6">
                  <div class="left">
                    <template v-if="index == 0">
                      <span class="omit">{{ i.name }}</span>
                      <p>
                        <span class="bold-blue">{{ i.num }}</span
                        >{{ (i.name=='移动存储介质' || i.name=='其他设备')?'个':(i.name=='安全保密产品' || i.name=='软件系统')?'套':'台' }}
                      </p>
                      <div class="omit">
                        <span>环比(月)</span>
                        <i
                          class="el-icon-caret-top"
                          style="color: #ff3535"
                          v-if="i.rate.indexOf('-') == -1"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          style="color: #00b62c"
                          v-else
                        ></i>
                        {{ i.rate }}
                      </div>
                    </template>
                    <template v-if="index == 1">
                      <span class="omit">{{ i.newName }}</span>
                      <p>
                        <span class="bold-blue">{{ i.rate }}</span
                        >%
                      </p>
                      <div class="omit">
                        <span>国产化替代率</span>
                      </div>
                    </template>
                  </div>
                  <div class="right sp-flex">
                    <img
                      :src="
                        require(`../../assets/images/asimgs/icon${idx + 1}.png`)
                      "
                      class="small-icon"
                      alt=""
                    />
                  </div>
                </template>
                <template v-else>
                  <div class="right sp-flex">
                    <img
                      :src="
                        require(`../../assets/images/asimgs/icon${idx + 1}.png`)
                      "
                      class="small-icon"
                      alt=""
                    />
                  </div>
                  <div class="left">
                    <template v-if="index == 0">
                      <span class="omit">{{ i.name }}</span>
                      <p>
                        <span class="bold-blue">{{ i.num }}</span
                        >{{ (i.name=='移动存储介质' || i.name=='其他设备')?'个':(i.name=='安全保密产品' || i.name=='软件系统')?'套':'台' }}
                      </p>
                      <div class="omit">
                        <span>环比(月)</span>
                        <i
                          class="el-icon-caret-top"
                          style="color: #ff3535"
                          v-if="i.rate.indexOf('-') == -1"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          style="color: ##00b62c"
                          v-else
                        ></i>
                        {{ i.rate }}
                      </div>
                    </template>
                    <template v-if="index == 1">
                      <span class="omit"> {{ i.newName }}</span>

                      <p>
                        <span class="bold-blue">{{ i.rate }}</span
                        >%
                      </p>
                      <div class="omit">
                        <span>国产化替代率</span>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 二级目录 -->
    <div class="w-box sec-menu" v-else v-loading="loading">
      <!-- 返回按钮 -->
      <img
        class="back"
        src="../../assets/images/asimgs/fanhui@2x.png"
        @click="backTo"
      />
      <el-button
        class="more"
        size="mini"
        v-if="transferObj.typeList.length > 8"
        @click="handleMore"
        >更多</el-button
      >
      <div class="s-title">
        <dict-label :options="assetsArr" :value="assetsType"></dict-label>
      </div>
      <div class="s-bottom">
        <!-- <second-overview /> -->
        <two-page :transferObj="transferObj" :parentName="parentName" @openDia="openDia" />
      </div>
    </div>
    <searchDialog
      ref="riskDialogRef"
      :total="total"
      :searchFormObj="assetsFormObj"
      :tableList="assetsTableList"
      :tableData="tableData"
      :totalInfo="safeConcernsoTalInfo"
      :show-total-info="true"
      @getTableList="getTableList"
      @operateEvent="operateEvent"
      operateName="进入画像"
      :operateOpen="operateOpen"
    />
  </div>
</template>

<script>
import {
  assetsRingRatio,
  localizationSubstitutionRate,
  assetsTypeRingRatio,
  localizationSubstitutionTypeRate,
  assetsListPage,
} from "@/api/assetSituation";
import DictLabel from "../common/dictLabel.vue";
import { cloneDeep } from "@/utils/loadash-es";
import Obj from "@/components/index/assetSituation/components/tableData/index";
import SecondOverview from "../echarts/assets/secondOverview.vue";
import TwoPage from "./twoPage.vue";
import SearchDialog from "../common/searchDialog.vue";
import {mapState} from 'vuex'

export default {
  components: { DictLabel, SecondOverview, TwoPage, SearchDialog },
  data() {
    return {
      parentName:null,
      // 是否显示进入画像
      operateOpen: false,
      loading: false,
      // 资产类型
      assetsType: "",
      // 显示一级目录
      showFirst: true,
      // 走马灯显示
      initialIndex: 0,
      // 国产替代化代码

      transferObj: {
        all: {
          rate: "",
        },
        typeList: [{ rate: "" }],
      },
      sortArr: [
        "总计",
        "外部设备",
        "移动存储介质",
        "其他设备",
        "终端",
        "服务器",
        "网络设备",
        "安全保密产品",
        "软件系统",
      ],
      // 轮播图数组
      overviewArr: [],
      queryParams: {
        searchType: this.$store.state.searchType || "3",
        current: 1,
        size: 10,
      },
      assetsArr: cloneDeep(Obj.assetsArr),
      // 对话框总数
      total: 0,
      // 对话框表格
      tableData: [],
      // 数据结构
      assetsTableList: cloneDeep(Obj.assetsTableList),
      safeConcernsoTalInfo: [
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", c: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
        { name: "终端（台）", value: "1570" },
        { name: "涉密转计算机（台）", value: "1570" },
        { name: "国产通用计算机（台）", value: "1570" },
      ],
      assetsFormObj:{},
      equipmentType:''
    };
  },
  computed: {
    ...mapState(['equipmentTypeList','equipmentSerTypeList','equipmentNetTypeList','assets_sec_productList','assets_software_systemList','peripheralTypeList','otherEquipmentTypeList','equipmentMediumTypeList']),
    // 资产概览
    defaultFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.assetsFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            equipmentStatusList: this.$store.state.equipmentStatusList,
            useStatusList: this.$store.state.useStatusList,
            secLevelList: this.$store.state.secLevelList,
            equipmentTypeList: this.$store.state.equipmentTypeList,
          },
        };
      },
      set(val) {
      },
    },
  },
  methods: {
    // 圆圈的定位
    iconStyle(idx) {
      let x = Math.sin((idx * 45 * Math.PI) / 180) * 10.9375;
      let y = Math.cos((idx * 45 * Math.PI) / 180) * 10.9375;
      let trans = "translate(-50%,-50%)";
      return {
        top: x + "rem",
        left: y + "rem",
        transform: trans,
      };
    },
    // 线的定位
    lineStyle(idx) {
      let x = Math.sin((idx * -45 * Math.PI) / 180) * 16;
      let y = Math.cos((idx * -45 * Math.PI) / 180) * 16;
      let transX = "-50%";
      let transY = "-50%";
      // 横轴2个
      if (idx % 4 == 0) {
        transX = `${idx == 0 ? "-70%" : "-30%"}`;
        transY = "-100%";
      } else if (idx % 4 == 2) {
        //   竖轴2个
        transY = `${idx == 6 ? "-120%" : "20%"}`;
      } else if (idx % 2 == 1) {
        transY = `${idx < 4 ? "0" : "-100%"}`;
      }

      return {
        top: x + "rem",
        left: y + "rem",
        transform: `translate(${transX},${transY}) `,
      };
    },
    // 内容的定位
    boxStyle(idx) {
      let x = Math.sin((idx * -45 * Math.PI) / 180) * 26;
      let y = Math.cos((idx * -45 * Math.PI) / 180) * 26;
      let transX = "-50%";
      let transY = "-50%";
      // 横轴2个
      if (idx % 4 == 0) {
        transX = `${idx == 0 ? "-65%" : "-35%"}`;
        transY = "-55%";
      } else if (idx % 4 == 2) {
        //   竖轴2个
        transY = `${idx == 6 ? "-190%" : "90%"}`;
      } else if (idx % 2 == 1) {
        transY = `${idx < 4 ? "68%" : "-160%"}`;
        transX = `${idx % 6 == 1 ? "-36%" : "-63%"}`;
      }

      return {
        top: x + "rem",
        left: y + "rem",
        transform: `translate(${transX},${transY}) `,
      };
    },
    // 获取数据
    getDatas(val) {
      this.queryParams = {
        ...this.queryParams,
        ...val,
      };
      this.overviewArr = [];
      let arr1 = [];
      let temp = [];
      let arr2 = [];

      assetsRingRatio(this.queryParams).then((res) => {
        for (let key in res) {
          this.assetsArr.map((item) => {
            if (item.label == res[key].name) {
              res[key].label = item.value;
            }
          });

          this.sortArr.map((i, idx) => {
            if (res[key].name == i) {
              arr1[idx] = res[key];
            }
          });
        }
        if(arr1.length>0){
          this.overviewArr.push(arr1);
        }
      });
      localizationSubstitutionRate(this.queryParams).then((res) => {
        for (let key in res) {
          temp.push({
            name: key,
            rate: res[key],
          });
        }
        temp.forEach((item) => {
          this.assetsArr.map((i, idx) => {
            if (item.name == i.name) {
              item.label = i.value;
              item.newName = i.label;
            }
          });
          temp[0].newName = "总计";
          this.sortArr.map((i, idx) => {
            if (item.newName == i) {
              arr2[idx] = item;
            }
          });
        });

        this.overviewArr.push(arr2);
      });
    },
    // 进入二级菜单
    enterSec(i, index) {
      this.operateOpen = false;

      if (i.label == "assets_host" || i.label == "assets_server") {
        this.operateOpen = true;
      }
      this.loading = true;
      this.assetsType = i.label;
      this.initialIndex = index;
      this.showFirst = false;
      let name = this.assetsArr.filter((item) => {
        return item.value == i.label;
      })[0].label;
      assetsTypeRingRatio(i.label).then((res) => {
        if (!res.typeList.length) {
          this.transferObj = {
            typeList: [],
          };
          this.loading = false;
          return;
        }
        this.safeConcernsoTalInfo = res.typeList.map((item) => {
          return {
            name: item.name + (i.label=='assets_storage_medium' || i.label=='assets_other_equipment' ?'（个）':i.label=='assets_sec_product' || i.label=='assets_software_system'?'（套）':'（台）'),
            value: item.num,
          };
        });
        this.safeConcernsoTalInfo.unshift({
          name: name + (i.label=='assets_storage_medium' || i.label=='assets_other_equipment' ?'（个）':i.label=='assets_sec_product' || i.label=='assets_software_system'?'（套）':'（台）'),
          value: res.all.num,
        });
        this.parentName=i.label;
        if (index == 1) {
          localizationSubstitutionTypeRate(i.label).then((response) => {
            this.transferObj = response;
            this.loading = false;
          });
        } else {
          this.transferObj = res;
          this.loading = false;
        }
      });
    },
    backTo() {
      this.showFirst = true;
    },
    // 打开对话框
    openDia(data) {
      let dictData=null;
     switch (data.type){
      case 'assets_server':
      dictData=this.equipmentSerTypeList;
        break;
        case 'assets_host':
        dictData=this.equipmentTypeList;
        break;
        case 'assets_net_equipment':
        dictData=this.equipmentNetTypeList;
        break;
        case 'assets_sec_product':
        dictData=this.assets_sec_productList;
        break;
        case 'assets_software_system':
        dictData=this.assets_software_systemList;
        break;
        case 'assets_other_equipment':
        dictData=this.peripheralTypeList;
        break;
        case 'assets_outsidee_equipment':
        dictData=this.otherEquipmentTypeList;
        break;
        case 'assets_storage_medium':
        dictData=this.equipmentMediumTypeList;
        break;
     }
     this.assetsFormObj={};
     this.assetsFormObj=this.defaultFormObj;
     this.assetsFormObj.listTypeInfo.equipmentTypeList=dictData
     this.equipmentType=data?.value
      let newQuery = { ...this.queryParams, assetsType: this.assetsType,equipmentType:data?.value };
      this.assetsFormObj.searchData.assetsType = this.assetsType;
      this.refreshData(newQuery).then((res) => {
        this.$refs.riskDialogRef.open = true;
      });
    },
    // 获取数据
    getTableList(val) {
      let query = { ...this.queryParams, assetsType: this.assetsType,equipmentType:this.equipmentType,...val };
      this.refreshData(query);
    },
    operateEvent(data) {
      window.open(window.urlPrefix + "dispose/entityPortrait/" + data.row.id+'?ip='+data.row.equipmentIp);
    },
    refreshData(query) {
      return new Promise((resolve, reject) => {
        assetsListPage(query).then((res) => {
          this.total = res.total;
          this.tableData = res.list;

          resolve(this.tableData);
        });
      });
    },
    //  点击更多
    handleMore(){
      if(this.transferObj.all){
        this.openDia(this.transferObj.all)
      }else{
        this.openDia(this.transferObj)
      }

    }
  },
  watch: {
    "$store.state.searchType": {
      handler(newValue, oldValue) {
        this.getDatas({
          searchType: newValue,
        });
      },
      immediate: true,
    },
    defaultFormObj:{
      handler(newValue){
        this.assetsFormObj=newValue
      },
      immediate:true
    }
  },
};
</script>

<style lang="scss" scoped>
.overview-pic {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .w-box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  // 一级目录
  .center-round {
    position: relative;
    width: 18.75rem;
    height: 18.75rem;

    background-size: 100%;
    .big-image {
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      animation: round 5s infinite linear;
    }
    .big-box {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .b-center {
        .bold-blue {
          font-size: 2.875rem;
          margin-bottom: 0.9375rem;
        }
      }
      .float-box {
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: 2.8125rem;
        i {
          margin: 0 0.625rem;
        }
      }
    }

    .f-contain {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.0625rem;
      height: 0.0625rem;
      transform: translate(-50%, -50%);
      position: absolute;

      .icon {
        position: absolute;
        height: 2.5rem;
        width: 2.5rem;
      }
      .line {
        position: absolute;
        z-index: -2;
        height: 5.5rem;
        &:nth-of-type(4n + 1) {
          width: 5.625rem;
          height: 0.9375rem;
        }
        &:nth-of-type(2n) {
          width: 5.5rem;
          height: 2.5rem;
        }
        &:nth-of-type(4n + 3) {
          height: 3.125rem;
        }
      }
      .content-box {
        position: absolute;
        cursor: pointer;
        width: 13.25rem;
        height: 6.25rem;
        padding: 0.625rem;
        padding-left: 0.875rem;
        .content-img {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          font-size: 1rem;
          margin: 0 5px;
          span {
            text-align: left;
          }
          p {
            width: 100%;
            text-align: left;
            margin: 0.3125rem 0;

            .bold-blue {
              margin-right: 5px;
              font-size: 1.5rem;
            }
          }
        }
        .right {
          margin-left: -5px;
          .small-icon {
            width: 3.125rem;
          }
        }
      }
    }
  }
  // 二级目录
  .sec-menu {
    display: flex;
    flex-direction: column;
    align-items: center;

    .back {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      width: 10rem;
      cursor: pointer;
    }
    .more {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
    }
    .s-title {
      background: url(../../assets/images/asimgs/tit@2x.png) no-repeat center;
      background-size: 100% 100%;
      width: 15.625rem;
      height: 3.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.875rem;
      font-weight: 400;
    }
    .s-bottom {
      position: relative;
      width: 100%;
      height: 100%;
      .s-b-center {
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
        width: 21.875rem;
        height: 21.875rem;
        background: url("../../assets/images/asimgs/zcej001@2x.png") no-repeat
          center;
        background-size: 100%;

        & > span {
          width: 100%;
          text-align: center;
          font-size: 1.5rem;
        }
        .bold-blue {
          font-size: 3.375rem;
          margin-bottom: 1.25rem;
        }
        p {
          margin-top: 20px;
          padding: 5px 1.25rem;

          border-radius: 4px;
        }
      }

      .s-b-round {
        position: absolute;
        width: 1px;
        height: 1px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .s-b-r-line {
          position: absolute;
          width: 18.75rem;
          height: 2.5rem;
          background: url(../../assets/images/asimgs/zcej-x03@2x.png) no-repeat
            center;
          background-size: 100% 100%;
          top: -5rem;
          left: 10.9375rem;

          &:nth-of-type(2) {
            top: -5rem;
            left: -29.5rem;
            transform: rotateY(180deg);
          }
          &:nth-of-type(3) {
            top: 5rem;
            left: -29.5rem;
            transform: rotate(180deg);
          }
          &:nth-of-type(4) {
            top: 5rem;
            left: 10.9375rem;
            transform: rotateX(180deg);
          }
        }
      }
      .s-b-content {
        position: absolute;
        width: 12.5rem;
        top: 0%;
        right: -18rem;
        transform: translateY(-50%);
        .s-b-c-head {
          height: 7.5rem;
          width: 100%;
          background: url(../../assets/images/asimgs/tk.png) no-repeat center;
          background-size: 100% 100%;
          .bold-blue {
            font-size: 2rem;
            margin-bottom: 0.9375rem;
          }
        }
        .s-b-c-bottom {
          width: 100%;
          background-image: linear-gradient(
            180deg,
            #002c41 0%,
            rgba(0, 30, 54, 0.5) 24%,
            rgba(0, 10, 37, 0) 50%,
            rgba(0, 23, 48, 0.5) 79%,
            #002139 100%
          );
          border: 0.51px solid rgba(35, 255, 249, 0.62);
          box-shadow: inset 0px 0px 4px 0px rgba(0, 224, 219, 1);
          padding: 0.625rem 1.25rem;
          margin-top: -1px;
        }

        &:nth-child(5) {
          top: 0%;
          top: 0%;
          left: -18rem;
          right: auto;
          transform: translateY(-50%);
        }
        &:nth-child(3) {
          bottom: 0%;
          left: -18rem;
          transform: translateY(87%);
        }
        &:nth-child(4) {
          bottom: 0%;
          right: -18rem;
          left: auto;
          transform: translateY(87%);
        }
      }
    }
  }
}
.omit {
  text-align: left;
  span {
    margin-right: 3px;
  }
}
</style>

<style lang="scss">
.overview-pic {
  .el-carousel {
    width: 100%;
    height: 100%;
    .el-carousel__container {
      width: 100%;
      height: 93%;
      // transform: scale(0.8);
      .el-carousel__item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .el-carousel__arrow {
      display: none;
    }
    .el-carousel__indicators--outside {
      .el-carousel__button {
        background: rgba(3, 255, 255, 0.2);
        border: 0.0625rem solid rgba(3, 255, 255, 0.6);
        box-shadow: 0rem 0rem 0.25rem 0rem rgba(2, 232, 254, 1);
        border-radius: 50%;
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 15px;
      }
    }
  }
  .el-carousel__indicators {
    .el-carousel__indicator:first-of-type {
      .el-carousel__button {
        margin-left: 0 !important;
      }
    }
  }
}
@keyframes round {
  0% {
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
